<template>
  <footer class="footer-nav">
    <router-link to="/market" :class="{active: isActive('/market')}">市场</router-link>
    <router-link to="/indicator" :class="{active: isActive('/indicator')}">指标</router-link>
    <router-link to="/live" :class="{active: isActive('/live')}">指标回测</router-link>
    <router-link to="/backtest" :class="{active: isActive('/backtest')}">量化</router-link>
    <router-link to="/mine" :class="{active: isActive('/mine')}">我的</router-link>
  </footer>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
function isActive(path) {
  return route.path === path
}
</script>
<style scoped>
.footer-nav {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  height: 50px;
  align-items: center;
  z-index: 100;
}
.footer-nav .active {
  color: #42b983;
  font-weight: bold;
  border-bottom: 2px solid #42b983;
}
.footer-nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #333;
  padding: 8px 0;
}
</style> 